<template>
	<view class="uni-common-mt" style="padding: 30upx 20upx;background-color: #CCCCCC;">
		<uni-popup :show="showPop" position="top" mode="fixed" v-bind:msg="popMsg" @hidePopup="togglePopup(false)" />
		<view class="uni-form-item uni-column">
			<view class="title">费率简称</view>
			<input class="uni-input" v-model="name" focus placeholder="请输入费率简称" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">费率</view>
			<input class="uni-input" v-model="rate" type="digit" placeholder="请输入费率" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">手续费</view>
			<input class="uni-input" type="digit" v-model="charge" placeholder="请输入手续费" />
		</view>
		<view class="uni-list-cell uni-list-cell-pd" style="background-color: #FFFFFF;">
			<view class="uni-list-cell-db">是否默认</view>
			<switch v-bind:checked="isChecked" @change="switchChange"/>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="button-sp-area">
				<button type="primary" plain="true" @click="action('1')">保存</button>
			</view>
			<view class="button-sp-area" style="padding-top: 20upx;">
				<button type="warn" plain="true" @click="action('2')">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default { 
		data(){
			return {
				name:"",
				rate:"",
				charge:0,
				id:"",
				showPop:false,
				popMsg:"",
				checked:'0',
				defaultType:'0',
			}
		},
		computed:{
			isChecked(){
				return this.checked === '1'
			}
		},
		onLoad(options) {
			// console.log(options);
			this.id = options.id;
			this.name = options.name;
			this.rate = options.rate;
			this.charge = options.charge;
			this.checked = this.defaultType = options.defaultType;
		},
		methods:{
			switchChange(e){
				const checked = e.target.value;
				if(checked){
					this.defaultType = '1';
				}else{
					this.defaultType = '0';
				}
			},
			action(type){
				if(type === '1'){
					if(!Boolean(this.name)){
						this.popMsg = "请填写费率简称";
						this.togglePopup('top');
						return;
					}
					if(!Boolean(this.rate)){
						this.popMsg = "请填写费率";
						this.togglePopup('top');
						return;
					}
					// return;
					const entity = {
						name:this.name,
						rate:this.rate,
						charge:this.charge,
						defaultType:this.defaultType
					}
					if(Boolean(this.id)){
						// this.$api.msg("修改");
						entity.id = this.id;
						this.$net.updateCost(entity).then(res => {
							if(res.code === 0){
								uni.navigateBack({
									delta:1
								})
							}
						});
					}else{
						// this.$api.msg("保存");
						this.$net.saveCost(entity).then(res => {
							if(res.code === 0){
								uni.navigateBack({
									delta:1
								})
							}
						});
					}
					
				}else if(type === '2'){
					var that = this;
					this.$net.deleteCost({
						id:that.id
					}).then(res=>{
						if(res.code === 0){
							uni.navigateBack({
								delta:1
							})
						}
					})
				}
				
			},
			togglePopup(type){
				this.showPop = type;
			}
		},
		components:{
			uniPopup
		}
	}
</script>

<style lang="scss">
	page {
		height: auto;
		min-height: 100%;
		background-color: #EBEBEB;
	}
</style>
